<template>
    <div class="module-name  pl10 pr10 ">
        <avue-crud v-model="dialogForm" :data="data" :option="option" :page.sync="page" :search.sync="searchForm"
                   :table-loading="loading"
                   @on-load="onLoad"
                   @search-change="handleSearchChange"
                   @row-save="handleSave"
                   @row-update="handleUpdate"
                   @row-del="handleDel">
            <!-- 自定义菜单-->
            <!--            <template slot-scope="scope" slot="menuRight">-->
            <!--                <el-button type="warning" size="mini">数据源</el-button>-->
            <!--            </template>-->

            <!--row插槽-->
            <template slot="parseTotalSize" slot-scope="{row}">
                {{ $utils.formatBytes(row.parseTotalSize) }}
            </template>

            <template slot="parseCurrentSize" slot-scope="{row}">
                {{ $utils.formatBytes(row.parseCurrentSize) }}
            </template>

            <template slot="status" slot-scope="{row}">
                <el-tag v-show="row.status === 1">启用</el-tag>
                <el-tag v-show=" row.status === 0" type="danger">禁用</el-tag>
            </template>

            <template slot="isUsing" slot-scope="{row}">
                <el-tag v-show=" row.isUsing === 0" type="info">未被使用</el-tag>
                <el-tag v-show=" row.isUsing=== 1" type="danger">正在使用</el-tag>
            </template>

            <template slot="isLose" slot-scope="{row}">
                <el-tag v-show=" row.isLose === 0" type="danger">已失效</el-tag>
                <el-tag v-show=" row.isLose=== 1" type="info">未失效</el-tag>
            </template>

            <!--自定义操作栏-->
            <template slot="menu" slot-scope="{ row }">
                <el-link class="mr10 ml5" icon="el-icon-s-tools" size="mini" type="primary" @click="handelRoleSet(row)">
                    权限配置
                </el-link>
            </template>
        </avue-crud>
        <RolePopup ref="rolePopup" v-model="popup.show" :currentData="currentRow"></RolePopup>
    </div>
</template>
<script>
import page from "@/mixins/page";
import RolePopup from './rolePopup.vue'

export default {
    name: "module-name",
    mixins: [page],
    components: {RolePopup},
    data() {
        return {
            searchForm: {},
            dialogForm: {},
            urls: {
                0: 'permission',
                1: 'role',
                2: 'findAll',
            },
            data: [],
            option: {
                ...window.avueCrud,
                addBtn: true,
                viewBtn: true,
                delBtn: true,
                editBtn: true,
                menuWidth: 400,
                column: [
                    {
                        label: 'id',
                        prop: 'id',
                        search: true,
                        width: '50',
                        display: false,
                        searchSpan: 3,
                    },
                    {
                        label: '角色名称',
                        prop: 'name',
                        search: true,
                        width: '150',
                        searchSpan: 6,
                    },
                    {
                        label: '备注',
                        prop: 'remark',
                    },
                    {
                        label: '排序',
                        prop: 'sort',
                    },
                    {
                        label: '创建时间',
                        prop: 'createAt',
                        display: false,
                    },
                    {
                        label: '修改时间',
                        prop: 'updateAt',
                        display: false,
                    },
                ],
            },
            currentRow: {},
            popup: {
                show: false
            }
        };
    },
    methods: {
        async handleUpdate(row, index, done) {
            const {code} = await this.$api.permission.role.update({
                id: row.id,
                name: row.name,
                remark: row.remark,
                sort: row.sort,
            })
            if (code === 200) {
                this.getData(this.searchForm)
                this.$notify({
                    message: '更改成功',
                    type: 'success',
                    duration: 2000,
                })
            }
            done()
        },

        async handleSave(row, done) {
            const {code, msg} = await this.$api.permission.role.create({
                name: row.name,
                remark: row.remark,
                sort: row.sort,
            })
            if (code === 200) {
                this.getData(this.searchForm)
                this.$notify({
                    message: msg || '创建成功',
                    type: 'success',
                    duration: 2000,
                })
            }
            done()
        },

        async handleDel(row) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    const {code} = await this.$api.permission.role.remove(row.id)
                    if (code === 200) {
                        this.getData(this.searchForm)
                        this.$notify({
                            message: '删除成功',
                            type: 'success',
                            duration: 2000,
                        })
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },

        handelRoleSet(row) {
            this.currentRow = row
            this.popup.show = true
            this.$nextTick(() => {
                this.$refs.rolePopup.findAllTree()
            })
        }
    }
};
</script>

<style lang="scss" scoped>
.module-name {
}
</style>
